/**
 * 学习目标：useEffect - 传入和不传入第二个可选参数区别
 */
import { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)

  const [msg, setMsg] = useState('')

  // 没传第二个参数：componentDidMount + componentDidUpdate
  //    1. 组件挂载时会执行一次
  //    2. 每次组件更新(所有的state, props)时会执行
  useEffect(() => {
    console.log(11111, '没有传入第二个参数', count)
  })

  // 传递了第二个参数：componentDidUpdate + 内部判断参数变化
  //    1. 仅在 第二个参数 更改时更新
  useEffect(() => {
    console.log(22222, '传入可第二个可选参数', count)
  }, [count])

  return (
    <div>
      <h1>useEffect-副作用</h1>
      <h2>count:{count}</h2>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
      <input type='text' value={msg} onChange={(e) => setMsg(e.target.value)} />
    </div>
  )
}
